<template>
  <div id="MyHeader">
    <h1>MyHeader</h1>
    <h2>{{ hotWeather ? '热' : '冷' }}</h2>
    <button @click="changeHot">改变</button>
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  props: ['hot'],
  data(){
    return{
      hotWeather:this.hot
    }
  },
  methods: {
    changeHot(){
      // console.log(this.hot)
      // console.log(this.hotWeather)
      this.hotWeather = !this.hotWeather
    }
  }

}

</script>

<style scoped>
#MyHeader {
  height: 150px;
  background-color: rebeccapurple;
}
</style>